<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制黏贴</title>
</head>
<body>
    <p contenteditable="true" id="text" style="outline: none">没有人能改变你，别人只能影响你，能改变你的只有你自己。 </p>
    <button id="btn1">复制1</button>
    <button id="btn2">复制2</button>
    <br/>
    <textarea rows="5" cols="60"></textarea>
    <script type="text/javascript">
        // 这个方法兼容性最好
        function copy1 (text) {
            var fakeElem = document.body.appendChild(document.createElement('textarea'));
            fakeElem.style.position = 'absolute';
            fakeElem.style.left = '-99999px';
            fakeElem.setAttribute('readonly', '');
            fakeElem.value = text;
            fakeElem.select();

            try {
                return document.execCommand('copy');
            } catch (err) {
                return false;
            } finally {
                fakeElem.remove();
            }
        }
        function copy2 (textEl) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(textEl);
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand("copy");
            selection.removeAllRanges();
        }
        document.addEventListener("copy", function (event) {
            // 需要阻止默认事件，否则剪切板内的数据仍然为选中复制的数据
            event.preventDefault();
            // window.clipboardData是兼容IE
            var clipboard = event.clipboardData || window.clipboardData;
            // 可以通过getSelection获取复制的内容
            var originData = window.getSelection().toString();
            // copy和cut事件中使用setData方法，但是不能使用getData方法
            clipboard.setData("text/plain", originData + new Date());
        });
        document.addEventListener("paste", function (event) {
            // window.clipboardData是兼容IE
            var clipboard = event.clipboardData || window.clipboardData;
            // paste事件中使用getData方法，但是不能使用setData方法
            var originData = clipboard.getData("text/plain");
            console.log(originData);
        });
        // 需要先屏蔽上面copy事件的监听.否则剪贴板的值会被修改
        document.getElementById("btn1").addEventListener("click", function (event) {
            var textEl = document.getElementById("text");
            copy1(text.innerText);
        });
        // 需要先屏蔽上面copy事件的监听.否则剪贴板的值会被修改
        document.getElementById("btn2").addEventListener("click", function (event) {
            var textEl = document.getElementById("text");
            copy2(textEl);
        });
    </script>
</body>
</html>